<template>
  <div class="minesettings">
    <div class="mines_tou">
      <p class="min_p1">
        <img @click="props.data(0)" class="img1" src="@/assets/fanhui.png">
        <span class="min_span1">账号资料</span>
      </p>
    </div>
    <div class="mines_zh" @click="show = true" >
      <p class="min_p1">
        <span class="min_span2">头像</span>
        <img class="img_2" src="@/assets/meinv.jpg">
        <img class="img3" src="@/assets/rigth.png">
      </p>
    </div>
    <van-action-sheet :show="show" :actions="actions" @select="onSelect" />
    <div class="mines_tou">
      <p class="min_p1">
        <span class="min_span2">用户ID</span>
        <span class="min_span3">DX89099990</span>
      </p>
    </div>
    <div class="mines_xiao" @click="props.data(4)">
      <p class="min_p1">
        <span class="min_span2">昵称</span>
        <span class="min_span4">Daisy</span>
        <img class="img5" src="@/assets/rigth.png">
      </p>
    </div>
    <div class="mines_zh"  @click="show1 = true">
      <p class="min_p1">
        <span class="min_span2">性别</span>
        <span class="min_span5">女</span>
        <img class="img6" src="@/assets/rigth.png">
      </p>
    </div>
    <van-action-sheet :show="show1" :actions="actions1" @select="onSelect1" />
    <div class="mines_xiao">
      <p class="min_p1">
        <span class="min_span2">出生日期</span>
        <img class="img7" src="@/assets/rigth.png">
      </p>
    </div>
    <div class="mines_tou" @click="props.data(5)">
      <p class="min_p1">
        <span class="min_span2">简介</span>
        <span class="min_span6">用心生活</span>
        <img class="img8" src="@/assets/rigth.png">
      </p>
    </div>
    
</div>

</template>

<script lang="ts" setup>
import { ref } from "@vue/reactivity";
const sz=ref(9.9)
const props=defineProps(["data"])
//头像
const show = ref(false);
const actions = [
  { name: '拍照' },
  { name: '从相册选择' },
  { name: '取消' },
];
const onSelect = (item:any) => {
  // 默认情况下点击选项时不会自动收起
  // 可以通过 close-on-click-action 属性开启自动收起
  show.value = false;
};
//性别
const show1 = ref(false);
const actions1 = [
  { name: '男' },
  { name: '女' },
  { name: '取消' },
];
const onSelect1 = (item:any) => {
  // 默认情况下点击选项时不会自动收起
  // 可以通过 close-on-click-action 属性开启自动收起
  show1.value = false;
};
</script>

<style scoped>
.minesettings{width: 390px;min-height: 800px;background-color: #f2f2f2;}
.minesettings div:hover{cursor: pointer;}
.minesettings div{float: left;}
.min_p1{vertical-align: middle}
.mines_tou{width: 390px;height: 55px;line-height: 55px;border-bottom: 2px solid #f2f2f2;background-color: #ffff;}
.mines_zh{width: 390px;height: 55px;line-height: 55px;border-bottom: 2px solid #f2f2f2;background-color: #ffff;}
.mines_xiao{width: 390px;height: 55px;line-height: 55px;border-bottom: 2px solid #f2f2f2;background-color: #ffff;}
.img1{width: 9px;height: 14px;vertical-align: middle;margin-left: 20px;}
.min_span1{vertical-align: middle;margin-left: 136px;}
.min_span2{font-size: 13px;vertical-align: middle;margin-left: 20px;}
.min_span3{font-size: 15px;color: #999999;vertical-align: middle;margin-left: 222px;}
.min_span4{font-size: 15px;color: #999999;vertical-align: middle;margin-left: 265px;}
.min_span6{font-size: 15px;color: #999999;vertical-align: middle;margin-left: 232px;}

.min_span5{width: 20px;height: 21px;vertical-align: middle;color: #9999b2;margin-left: 284px;}
.img_2{width: 40px;height: 40px;margin-left: 260px;vertical-align: middle;}
.img3{width: 8px;height: 12px;margin-left: 10px;vertical-align: middle;}
.img4{width: 8px;height: 12px;margin-left: 262px;vertical-align: middle;}
.img5{width: 8px;height: 12px;margin-left: 7px;vertical-align: middle;}
.img6{width: 8px;height: 12px;margin-left: 5px;vertical-align: middle;}
.img7{width: 8px;height: 12px;margin-left: 275px;vertical-align: middle;}
.img8{width: 8px;height: 12px;margin-left: 7px;vertical-align: middle;}
</style>